<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- React核心库 -->
  <script src="../build/react.min.js"></script>
  <!-- React-DOM提供与DOM相关的功能  -->
  <script src="../build/react-dom.min.js"></script>
  <!-- Browser.js 的作用是将 JSX 语法转为 JavaScript 语法 -->
  <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
  var NotesList = React.createClass({
    render: function () {
      return (
        <ol>
          {
            // this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object
            // 如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
            // 直接用React.Children.map来处理 就不用考虑这些问题
            React.Children.map(this.props.children, child => {
              return <h1>{child}</h1>
            })
          }
        </ol>
      )
    }
  });

  ReactDOM.render(<NotesList><span>111</span><span>222</span></NotesList>, document.getElementById("example"));
</script>
</body>
</html>